<template>
	<div class="LoginBody">
		<el-form class="LoginBox" :model="ruleForm" :rules="rules" ref="ruleForm">
			<h3 class="title">注册</h3>
			<el-form-item style="margin-bottom: 30px;" prop="username">
				<el-input placeholder="请输入账号" v-model="ruleForm.username" clearable>
					<i slot="prefix" class="el-icon-user-solid"></i>
				</el-input>
			</el-form-item>
			<el-form-item style="margin-bottom: 30px; " prop="nickname">
				<el-input placeholder="请输入昵称" v-model="ruleForm.nickname" clearable>
					<i slot="prefix" class="el-icon-s-custom"></i>
				</el-input>
			</el-form-item>
			<el-form-item style="margin-bottom: 30px; " prop="password">
				<el-input placeholder="请输入密码" v-model="ruleForm.password" show-password clearable>
					<i slot="prefix" class="el-icon-lock"></i>
				</el-input>
			</el-form-item>
			<el-form-item style="margin-bottom: 30px; " prop="phone">
				<el-input placeholder="请输入电话号码" v-model="ruleForm.phone" clearable>
					<i slot="prefix" class="el-icon-phone-outline"></i>
				</el-input>
			</el-form-item>
			<el-form-item style="margin-bottom: 30px; " prop="email">
				<el-input placeholder="请输入邮箱" v-model="ruleForm.email" clearable>
					<i slot="prefix" class="el-icon-s-promotion"></i>
				</el-input>
			</el-form-item>
			<el-button type="primary" style="width: 100%; margin-bottom: 10px;"
				@click="submitForm('ruleForm')">注册</el-button>
			<div style="display: flex;">
				<span style="font-size: 14px;">已有账号？</span>
				<a style="color: #409eff;font-size: 14px;cursor: pointer;" @click="toLogin">去登录</a>
			</div>

		</el-form>
	</div>
</template>

<script>
	import loginApi from "@/api/login"
	export default {
		data() {
			return {
				ruleForm: {
					username: "",
					password: "",
					nickname: "",
					phone: "",
					email: ""
				},
				rules: {
					username: [{
						required: true,
						message: "请输入用户名",
						trigger: 'blur'
					}],
					password: [{
						required: true,
						message: "请输入密码",
						trigger: 'blur'
					}],
					nickname: [{
						required: true,
						message: "请输入昵称",
						trigger: 'change'
					}],
					phone: [{
						required: true,
						message: "请输入电话号码",
						trigger: 'blur'
					},
					{
						min: 7,
						max: 11,
						message: '长度在 7到 11个字符',
						trigger: 'blur'
					}
					],
					email: [{
						required: true,
						message: "请输入邮箱",
						trigger: 'change'
					}],
				},
			};
		},
		methods: {
			async register() {
				const res = await loginApi.register("/Login/register", {
					userName: this.ruleForm.username,
					password: this.ruleForm.password,
					nickname: this.ruleForm.nickname,
					phone: this.ruleForm.phone,
					email: this.ruleForm.email
				});
				if (res.code == 200) {
					setTimeout(() => {
						this.$router.push('/Login');
					}, 3000);
					this.$message({
						showClose: true,
						message: '注册成功，即将跳转至登录',
						type: 'success'
					});
				}else{
					this.$message({
						showClose: true,
						message: res.msg,
						type: 'error'
					});
				}
			},
			toLogin() {
				this.$router.push("/Login");
			},
			submitForm(form) {
				this.$refs[form].validate((valid) => {
					if (valid) {
						this.register();
						this.$refs.form.resetFields();
						this.ruleForm = "";
					} else {
						console.log("error submit!!");
						return false;
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.LoginBody {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 98vh;
		background: url("../assets/images/login-background.jpg");
		background-size: cover;

		.LoginBox {
			border-radius: 6px;
			background: #ffffff;

			width: 400px;
			padding: 20px 25px 30px 25px;

			.title {
				margin: 0px auto 30px auto;
				text-align: center;
				color: #707070;
			}

			.yzmBox {
				display: flex;

				.el-input {
					width: 50%;
				}

				.img {
					margin-left: 5%;
					cursor: pointer;
				}
			}
		}
	}
</style>